<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-alert
          message="当前设置的数据仅对保存后进入系统的新数据生效，对系统已有的旧数据不做变更。"
          type="info"
        />
        <a-row>
          <div class="row"><span></span>基本设置</div>
          <a-col :span="12">
            <a-form-model-item label="IOSS" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ioss">
              <a-input v-model="model.ioss" placeholder="请输入IOSS"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="IOSS国际代码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="iossInterCode">
              <a-input v-model="model.iossInterCode" placeholder="请输入IOSS国际代码"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="EORI" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="eori">
              <a-input v-model="model.eori" placeholder="请输入EORI"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="EORI国际代码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="eoriInterCode">
              <a-input v-model="model.eoriInterCode" placeholder="请输入EORI国际代码"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="税号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="taxNum">
              <a-input v-model="model.taxNum" placeholder="请输入税号"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="税号所属国际代码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="taxInterCode">
              <a-input v-model="model.taxInterCode" placeholder="请输入税号所属国际代码"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="自动创建FBA仓库信息" :labelCol="labelCols" :wrapperCol="{xs: { span: 24 },sm: { span: 19 }}" prop="autoCreateWarehouse">
              <j-multi-select-tag v-model="model.autoCreateWarehouse" dictCode="oms_auto_create_warehouse" placeholder="请选择是否创建方式" />
            </a-form-model-item>
          </a-col>
        </a-row>
           <a-divider />
          <a-row>
          <div class="row"><span></span>费用设置</div>
          <a-col :span="24">
            <a-form-model-item label="平台佣金费率" :labelCol="labelCols" :wrapperCol="wrapperCols" prop="commissionFee">
              <a-input-number class="number-input" v-model="model.commissionFee" placeholder="请输入平台佣金费率,保留小数点后两位。例如:25.25" step="0.01" :formatter="value => `${value}`.replace(/(\d)(?=(\d{2})+\.)/g, '$1,')" :parser="value =>value.match(/^[0-9]*\.([0-9]{0,2})|^[0-9]*/)[0]"  style="width:94.5%" />
              <span class="right-icon">%</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="vat税率" :labelCol="labelCols" :wrapperCol="wrapperCols" prop="vatRate">
              <a-input-number class="number-input" v-model="model.vatRate" placeholder="请输入vat税率,保留小数点后两位。例如:25.25" step="0.01" :formatter="value => `${value}`.replace(/(\d)(?=(\d{2})+\.)/g, '$1,')" :parser="value =>value.match(/^[0-9]*\.([0-9]{0,2})|^[0-9]*/)[0]" style="width: 94.5%" />
              <span class="right-icon">%</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="税费计费方式" :labelCol="labelCols" :wrapperCol="wrapperCols" prop="taxWay">
              <j-dict-select-tag type="list" v-model="model.taxWay" dictCode="oms_store_tax_way" placeholder="请选择税费计费方式" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'

  export default {
    name: 'StoreAuthAmazonForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 14 },
        },
        labelCols:{
          xs: { span: 24 },
          sm: { span: 4 },
        },
        wrapperCols: {
          xs: { span: 24 },
          sm: { span: 19 },
        },
        confirmLoading: false,
        validatorRules: {
          ioss: [{ pattern: /^.{0,50}$/, message: '请输入不超过50个文字' }],
          iossInterCode: [{ pattern: /^.{0,50}$/, message: '请输入不超过50个文字' }],
          eori: [{ pattern: /^.{0,50}$/, message: '请输入不超过50个文字' }],
          eoriInterCode:[{ pattern: /^.{0,50}$/, message: '请输入不超过50个文字' }],
          taxNum:[{ pattern: /^.{0,50}$/, message: '请输入不超过50个文字' }],
          taxInterCode:[{ pattern: /^.{0,50}$/, message: '请输入不超过50个文字' }],
          taxWay:[{required:true,message:'请选择税费计算方式',}],
        },
        url: {
          add: "/oms/store/storeAuthAmazon/add",
          edit: "/oms/store/storeAuthAmazon/edit",
          queryById: "/oms/store/storeAuthAmazon/queryById"
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record); 
        this.model.taxWay = record.taxWay ? record.taxWay:'1'
        this.visible = true;
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            httpAction(this.url.edit,this.model,'put').then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }

        })
      },
    }
  }
</script>
<style lang="less" scoped>
/deep/.ant-alert.ant-alert-no-icon {
  margin-bottom: 10px;
  .ant-alert-message {
    color: #0e8ebe;
  }
}
/deep/.ant-divider-horizontal{
  margin: 0px 0 15px 0;
}
.row{
  color: #333;
  font-weight: bold;
  font-size: 15px;
  span{
    padding: 3px 2px;
    background:#1890ff;
    margin-right: 10px;
  }
}
.number-input{
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.right-icon{
    position: relative;
    padding: 5.5px 11px;
    line-height: 30px;
    color: rgba(0, 0, 0, .65);
    font-weight: 400;
    font-size: 14px;
    text-align: center;
    background-color: #fafafa;
    border: 1px solid #d9d9d9;
    border-left: none;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    transition: all .3s;
}
</style>